import { ref, computed, Ref } from 'vue'

export type Todo = {
    id: number,
    completed: boolean,
    title: string,
    oldTitle?: string
}

const filters =  {
    all: (todos:Array<Todo>):Array<Todo> => {
        return todos
    },
    active: (todos:Array<Todo>):Array<Todo> => {
        return todos.filter(todo => {
            return !todo.completed
        });
    },
    completed: (todos:Array<Todo>):Array<Todo> => {
        return todos.filter(todo => {
            return todo.completed
        });
    }
}
export function saveTodos(todos: Array<Todo>) {
    localStorage.setItem('myTodos', JSON.stringify(todos))
}
export function getTodos():Array<Todo> {
    const todosStr = localStorage.getItem('myTodos') || '[]'
    return JSON.parse(todosStr)
}

export function useTodoState() {
    const todos = ref<Array<Todo>>([]) // ref文档 https://composition-api.vuejs.org/zh/api.html#ref
    const allDone = ref<boolean>(false)
    const newTodo = ref<string>('')
    const editedTodo = ref<Todo | undefined>(undefined)
    const visibility = ref<string>('all')
    const filteredTodos = computed(() => filters[visibility.value](todos.value)) // computed文档 https://composition-api.vuejs.org/zh/api.html#computed
    const remaining = computed(() => {
        return filters.active(todos.value).length;
    })

    return {
        todos,
        visibility,
        allDone,
        newTodo,
        editedTodo,
        filteredTodos,
        remaining,
    }
}

export function addTodo(todos:Array<Todo>, newTodo:Ref<string>) {
    if (newTodo.value) {
        todos.unshift({
            id: new Date().getTime(),
            completed: false,
            title: newTodo.value
        })
        newTodo.value = ''
    }
}
export function editTodo(todos:Array<Todo>, id:number) {
    const editOne = todos.find(t => t.id === id)
    if (editOne) {
        editOne.oldTitle = editOne.title // 保存编辑前的值
    }
}
export function doneEdit(editedTodo:Ref<Todo>) {
    editedTodo.value = undefined
}
export function cancelEdit(todos:Array<Todo>, id:number, editedTodo:Ref<Todo>) {
    const editOne = todos.find(t => t.id === id)
    if (editOne) {
        editOne.title = editedTodo.value.oldTitle // 恢复为编辑前的值
        editedTodo.value = undefined
    }
}
export function removeCompleted(todos:Ref<Array<Todo>>) {
    todos.value = todos.value.filter(t => !t.completed)
}
export function removeTodo(todos:Array<Todo>, id:number) {
    const index = todos.findIndex(t => t.id === id)
    if (index > -1) {
        todos.splice(index, 1)
    }
}